<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教育展示--投教视频</title>
    <link rel="stylesheet" href="/static/common/css/reset.css">
    <link rel="stylesheet" href="/static/common/css/swiper_2.7.css">
    <link rel="stylesheet" href="/static/common/css/header.css">
    <link rel="stylesheet" href="/static/common/css/footer.css">
    <link rel="stylesheet" href="/static/css/exhibition/page_exhibition-video.css">
    <link rel="stylesheet" href="/static/common/css/common.css">

</head>

<body>
    <!-- 头部部分 -->
    <div id="header"></div>
    <!-- 内容区域 -->
    <div class="dh-main">
        <div class="exhibition-banner"></div>
        <div class="main-content">
            <div class="main-left">
                <div class="dh-top1">
                    <p class="h-top">教育展示</p>
                </div>
                <ul class="dh-list">
                    <li> <a class="dh-acitve" href="page_exhibition-video.html">投教视频 </a></li>
                    <li> <a href="list_exhibition-design.html">创意设计 </a></li>
                    <li> <a href="list_exhibition-magazine.html">电子杂志 </a></li>
                    <li> <a  href="list_exhibition-warningcase.html">风险警示与案例</a></li>
                </ul>
            </div>
            <div class="main-right">
                <div class="right-txt-box">
                    <h1>投教视频</h1>
                    <div class="wz">
                        <span class="wz-span">您的位置：<a href="">首页</a> > <a href="">教育展示</a> ><a href="">投教视频</a> </span>
                    </div>
                </div>
                <div class="box-txt">
                    <div class="zs-tabs">
                        <p class="zs-acitve"><a href="">原创系列</a></p>
                        <p> <a href=""><img src="../static/images/exhibition-video/name_img1.png" alt=""> 产品展示</a></p>
                        <p><a href=""><img src="../static/images/exhibition-video/name_img2.png" alt="">风险教育专题</a></p>
                        <p><a href=""><img src="../static/images/exhibition-video/name_img3.png" alt="">内幕交易警示录</a></p>
                        <p><a href=""><img src="../static/images/exhibition-video/name_img4.png" alt="">培训园地</a></p>
                        <div class="zs-tabs-show">
                            <img src="../static/images/college-campus/mzsm-img.png" alt="">
                            <span>免责声明</span>
                        </div>
                    </div>
                    <!-- <source  src=""> -->
                    <video width="100%" id="videos" src="https://media.w3.org/2010/05/sintel/trailer.mp4" class="videos-tabs" preload="auto" controls="controls"></video>  

                     <!-- 增加内容区域 -->
                     <div class="boxs-txtd">
                        <h1 class="h1-txtd">期货基础知识</h1>
                        <div class="h1-txtd-ts">
                            <span class="h1-txtd-ts1">上传日期: <span>2016/10/10 15:30</span></span>
                            <span class="h1-txtd-ts2">观看量: <span>111111</span> </span>
                        </div>
                    </div>
                    <div class="swiper-content">
                        <div class="swiper-container swiper-videos">
                            <div class="swiper-wrapper box-video">
                                <!-- <div class="swiper-slide slide-video">
                                    <div class="video-banner video-active"
                                        data-banner='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4'>
                                        <img src="../static/images/dh-pace/video_banner2.png" alt="">
                                        <p>国际黄金期货价格屡创</p>
                                    </div>
                                </div>
                                <div class="swiper-slide slide-video">
                                    <div class="video-banner"
                                        data-banner='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4'>
                                        <img src="../static/images/dh-pace/video_banner2.png" alt="">
                                        <p>国际黄金期货价格屡创</p>
                                    </div>
                                </div>
                                <div class="swiper-slide slide-video">
                                    <div class="video-banner"
                                        data-banner='https://apd-a7d084eea7965209bb1551cf1c0f593d.v.smtcdns.com/om.tc.qq.com/AfIUQUJ0HtKJv0FqqT8Z7ttZD0QbSqa7JMXFagIgylDY/uwMROfz2r5zEIaQXGdGnC2dfDmafRkP9ujxgqKjuATzMrE-2/v3046te93w1.mp4?sdtfrom=v1010&guid=65e34ad9f8682373223f76170bfc6b90&vkey=062A251B9F5658512F176207A1B5F6FCAF38CE5659DC56373227191C384E9B2B83FCAF18135FE6909563E0AD180CC3D55AB7149B74C293ADABFA71E7341A10FE87DFD7E18F147AD2AC6DAC7B510CEA40D67B5879C8982283C483473D7278A89CD2F0BDFF1D1FD22F849C2EB6E9DA780AB61A60CED75C776F311EBA9EB63F8ED2'>
                                        <img src="../static/images/dh-pace/video_banner2.png" alt="">
                                        <p>国际黄金期货价格屡创</p>
                                    </div>
                                </div>
                                <div class="swiper-slide slide-video">
                                    <div class="video-banner"
                                        data-banner='https://apd-a7d084eea7965209bb1551cf1c0f593d.v.smtcdns.com/om.tc.qq.com/AfIUQUJ0HtKJv0FqqT8Z7ttZD0QbSqa7JMXFagIgylDY/uwMROfz2r5zEIaQXGdGnC2dfDmafRkP9ujxgqKjuATzMrE-2/v3046te93w1.mp4?sdtfrom=v1010&guid=65e34ad9f8682373223f76170bfc6b90&vkey=062A251B9F5658512F176207A1B5F6FCAF38CE5659DC56373227191C384E9B2B83FCAF18135FE6909563E0AD180CC3D55AB7149B74C293ADABFA71E7341A10FE87DFD7E18F147AD2AC6DAC7B510CEA40D67B5879C8982283C483473D7278A89CD2F0BDFF1D1FD22F849C2EB6E9DA780AB61A60CED75C776F311EBA9EB63F8ED2'>
                                        <img src="../static/images/dh-pace/video_banner2.png" alt="">
                                        <p>国际黄金期货价格屡创</p>
                                    </div>
                                </div>

                                <div class="swiper-slide slide-video">
                                    <div class="video-banner"
                                        data-banner='https://media.w3.org/2010/05/sintel/trailer.mp3'>
                                        <img src="../static/images/dh-pace/video_banner2.png" alt="">
                                        <p>国际黄金期货价格屡创</p>
                                    </div>
                                </div>

                                <div class="swiper-slide slide-video">
                                    <div class="video-banner"
                                        data-banner='https://media.w3.org/2010/05/sintel/trailer.mp3'>
                                        <img src="../static/images/dh-pace/video_banner2.png" alt="">
                                        <p>国际黄金期货价格屡创</p>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div id="btnVideo1"><img src="../static//images/exhibition-video/btn_left.png" alt=""> </div>
                        <div id="btnVideo2"><img src="../static//images/exhibition-video/btn_right.png" alt=""></div>

                    </div>
                </div>


            </div>

        </div>


    </div>
   <!-- 免责声明弹窗 -->

   <div class="hide-disclaimer1" style="display: none;">
    <div class="disclaimer1">
        <h3>免责声明</h3>
        <p>
            尊敬的投资者：经营机构的适当性匹配意见不表明其对产品或者服务的风险和收益做出实质性判断或者保证。投资者根据自身能力审慎决策，独立承担投资风险。<br>
            风险承受能力评估是经营机构履行适当性管理义务的基础环节，其目的是便于对您的风险承受能力进行分类分级，使本公司所提供的产品或服务与您的风险承受能力等级相匹配，有助于您选择合适的产品或服务类别。<br>
            我们真诚提醒您：本公司向客户履行风险承受能力评估等适当性职责，并不能取代您自己的投资判断，也不会降低产品或服务的固有风险。同时，本公司根据您提供的信息对您进行的基本风险承受能力评估，并依此提供匹配意见。购买产品或证券服务相关的投资风险、履约责任以及费用等将由您自行承担。
        </p>
        <button class="btn-disclaimer1">确认</button>
    </div>
</div>


<!-- 版权声明 -->

<div class="hide-disclaimer2" style="display: none;">
    <div class="disclaimer2">
        <h3>版权声明</h3>
        <p>
            尊敬的投资者：经营机构的适当性匹配意见不表明其对产品或者服务的风险和收益做出实质性判断或者保证。投资者根据自身能力审慎决策，独立承担投资风险。<br>
            风险承受能力评估是经营机构履行适当性管理义务的基础环节，其目的是便于对您的风险承受能力进行分类分级，使本公司所提供的产品或服务与您的风险承受能力等级相匹配，有助于您选择合适的产品或服务类别。<br>
            我们真诚提醒您：本公司向客户履行风险承受能力评估等适当性职责，并不能取代您自己的投资判断，也不会降低产品或服务的固有风险。同时，本公司根据您提供的信息对您进行的基本风险承受能力评估，并依此提供匹配意见。购买产品或证券服务相关的投资风险、履约责任以及费用等将由您自行承担。
        </p>
        <button class="btn-disclaimer2">确认</button>
    </div>
</div>
    <!--放一个id为footer的div,把footer.html加载到这块-->
    <div id="footer"></div>
    <!-- 底部部分 -->
</body>
<script src="/static/common/js/jquery-1.11.3.js"></script>
<!-- 加载头尾 -->

<script src="/static/common/js/load.js"></script>
<script src="/static/common/js/swiper_2.7.js"></script>
<script src="../static/js/page_exhibition-video.js"></script>
<script>
//    var mySwipersVideo = new Swiper('.swiper-videos', {
//             // autoplay: 5000,//可选选项，自动滑动
//             // loop: true,//可选选项，开启循环
//             paginationClickable: true,
//             slidesPerView: 4,
//             // onInit: function (mySwipersVideo) {
//             //     mySwipersVideo.swipeNext()
//             // }
//         })
    
//         $('#btnVideo1').click(function () {
//             mySwipersVideo.swipePrev();
            
            
//         })
//         $('#btnVideo2').click(function () {
//             mySwipersVideo.swipeNext();
//         })
 

//     video切换
//     $('.video-banner').click(function () {
//         $(this).addClass('video-active').parent().siblings().children().removeClass('video-active')
//         var playurl = $(this).data('banner');
//     document.getElementById("videos").src=playurl ;
//     $("#videos")[0].play();
//     })

    // $('.zs-tabs>p').click(function () {
    //     $(this).addClass('zs-acitve').siblings().removeClass('zs-acitve')
    //     $('.tabs1-active').eq($(this).index()).show().siblings().hide()
    // })
    // 获取自定义属性

</script>

</html>